import { createVNode, render } from 'vue'
import XtxConfirm from '@/components/library/XtxConfirm'

// 3.准备一个装载确认框提示组件的容器
const div = document.createElement('div')
div.setAttribute('class', 'xtx-confirm-container')
document.body.appendChild(div)

/**
 * 函数式调用确认框组件方法
 * @param title
 * @param text
 * @return Promise 点击取消触发reject(), 点击确认触发resolve(). 点击它们两都会销毁组件
 */
export default function({
  title,
  text
}) {
  return new Promise((resolve, reject) => {
    // 点击取消触发的函数
    const cancelCallback = () => {
      render(null, div)
      reject(new Error('点击取消了'))
    }
    // 点击确认触发的函数
    const submitCallback = () => {
      render(null, div)
      resolve()
    }

    // 渲染组件
    // 1.导入确认框组件
    // 2.将确认框提供组件编译为虚拟节点(dom节点)   ☆☆
    // createVNode(组件, 属性对象(props) )
    const vNode = createVNode(XtxConfirm, {
      title,
      text,
      cancelCallback,   // 组件的自定义属性支持 Function 类型
      submitCallback
    })
    // 4.将虚拟节点渲染到容器中  render(虚拟节点, DOM容器)
    render(vNode, div)

  })
}
